<template>
	<view class="mask coupon-mask">
		<view class="coupon-box">
			<view class="coupon-txt">恭喜您获得<br>{{arry.length}}张优惠券</view>
			<view class="coupon-open" @click="toUrl('/userPage/user/discount_coupon')">开</view>
			<image :src="staticUrl+'/images/jh_up/bg_coupon.png'" mode="widthFix" class="bg_coupon"></image>
			<text class="iconfont icon-guanbi" @click="close"></text>
			<image :src="staticUrl+'/images/jh_up/light_coupon.png'" class="light_coupon"></image>
		</view>
	</view>
</template>
<script>
	export default{
		props:["couponArry"],
		data(){
			return{
				arry: this.couponArry,
				staticUrl: this.staticUrl,
			}
		},
		methods:{
			close:function(){
				this.$emit("closeFunc")
			}
		}
	}
</script>

<style scoped lang="scss">
	.coupon-mask{
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		.coupon-box{
			width: 600rpx;
			height: 600rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.coupon-txt{
				text-align: center;
				position: absolute;
				width: 100%;
				z-index: 3;
				top: 180rpx;
				color: #FFD73A;
				font-weight: bold;
				font-size: 44rpx;
			}
			.icon-guanbi{
				position: absolute;
				bottom: -30rpx;
				z-index: 5;
			}
			.coupon-open{
				position: absolute;
				bottom: 130rpx;
				width: 146rpx;
				height: 146rpx;
				z-index: 5;
				opacity: 0;
			}
			.bg_coupon{
				width: 450rpx;
				height: 508rpx;
				position: relative;
				z-index: 1;
			}
			@keyframes ro {
				0% {transform: rotate(0);}
				100% {transform: rotate(360deg);}
			}
			.light_coupon{
				width: 800rpx;
				height: 800rpx;
				position: absolute;
				top: -100rpx;
				left: -100rpx;
				animation: ro 5s linear infinite;
			}
		}
	}
</style>
